<template>
  <div id="app" style="font-size: 26px; font-weght: bold; margin: 30px 0">
    <header class="header">
      <el-input
        placeholder=""
        v-for="(item, index) in topInputList"
        :key="index"
        v-model="item.text"
        :placeholder="item.title"
        class="top-input"
      ></el-input>
      <div class="everyBox slelctBox">
        <span class="span">类型：</span>
        <el-select
          v-model="value1"
          placeholder="请选择"
          @change="opctionchangeOne"
        >
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <el-date-picker
        class="datePicker"
        v-model="time1"
        type="datetimerange"
        @change="datePicker"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button type="primary" icon="el-icon-search" @click="search"
        >搜索</el-button
      >
      <div style="margin: 0 10px">
        <download-excel
          :fields="exportDataStandard"
          :data="multipleSelection1"
          type="xls"
          :name="exportName"
          :defaultValue="exportDefaultValue"
          :fetch="createExportData"
          :before-generate="startDownload"
          :before-finish="finishDownload"
          worksheet="导出信息"
        >
          <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
          <el-button type="primary" icon="el-icon-download">导出</el-button>
        </download-excel>
        <!--        <el-button type="primary" icon="el-icon-download" @click="derive">导出</el-button>-->
      </div>
    </header>
    <div class="body">
      <el-tabs type="border-card" @tab-click="handleClick">
        <el-tab-pane>
          <span label="全部订单" slot="label"
            >全部订单<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-tab-pane>
          <span label="待支付" slot="label"
            >待支付<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-tab-pane>
          <span label="代发货" slot="label"
            >代发货<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-tab-pane>
          <span label="待收货" slot="label"
            >待收货<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-tab-pane>
          <span label="待评价" slot="label"
            >待评价<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-tab-pane>
          <span label="已完成" slot="label"
            >已完成<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-tab-pane>
          <span label="已取消" slot="label"
            >已取消<i class="el-icon-date"></i>
          </span>
        </el-tab-pane>
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          max-height="600"
          border
          fit
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed></el-table-column>
          <el-table-column show-overflow-tooltip label="订单号" width="170">
            <template slot-scope="scope">
              <el-popover
                @show="popoverShow(scope.row)"
                @hide="popoverHide(scope.row)"
                placement="right"
                trigger="hover"
              >
                <div style="max-width: 700px; overflow: hidden">
                  <el-table :data="littleTableData" fit>
                    <el-table-column
                      width="300"
                      show-overflow-tooltip
                      property="name"
                      label="商品名称"
                    ></el-table-column>
                    <el-table-column
                      width="100"
                      show-overflow-tooltip
                      property="price"
                      label="价格"
                    ></el-table-column>
                    <el-table-column
                      width="100"
                      show-overflow-tooltip
                      property="nums"
                      label="数量"
                    ></el-table-column>
                    <el-table-column
                      width="100"
                      show-overflow-tooltip
                      property="amount"
                      label="小计"
                    ></el-table-column>
                  </el-table>
                </div>
                <span slot="reference" class="orderId">{{
                  scope.row.order_id
                }}</span>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="order_type1"
            label="订单类型"
            width="90"
          >
          </el-table-column>

          <el-table-column
            show-overflow-tooltip
            prop="cctime"
            label="下单时间"
            width="180"
          >
          </el-table-column>
          <!--    status:'',//status售后状态 1=未审核 2=审核通过 3=审核拒绝'-->

          <el-table-column
            show-overflow-tooltip
            prop="status_text"
            label="订单状态"
            width="90"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip label="图片" width="200">
            <template slot-scope="scope">
              <el-image
                v-if="
                  scope.row.confirm_kt_img != null ||
                  scope.row.confirm_kt_img != undefined
                "
                v-for="(item, index) in scope.row.img_list"
                :key="index"
                style="width: 60px; height: 60px; margin: 0 10px"
                :src="item"
                :preview-src-list="scope.row.img_list"
                fit="cover"
              ></el-image>
            </template>
          </el-table-column>

          <!--        <el-table-column-->
          <!--          show-overflow-tooltip-->
          <!--          prop=""-->
          <!--          label="售后状态"-->
          <!--          width="90">-->
          <!--        </el-table-column>-->
          <el-table-column
            show-overflow-tooltip
            prop="nickname"
            label="用户名称"
            width="100"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="user_mobile"
            label="用户手机号"
            width="120"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="ship_name"
            label="收货人姓名"
            width="100"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="ship_mobile"
            label="收货人手机号"
            width="110"
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="shouhuoAddress"
            label="收货地址"
            width=""
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="pay_status_text"
            label="支付状态"
            width=""
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="ship_status_text"
            label="发货状态"
            width=""
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="payed"
            label="订单总额"
            width=""
          >
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="remark"
            label="订单备注"
            width="140"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip label="操作" width="250">
            <template slot-scope="scope">
              <el-button @click="checkOrder(scope.row)" size="mini"
                >查看</el-button
              >
              <el-button @click="setOrder(scope.row)" size="mini"
                >编辑</el-button
              >
              <el-button
                @click="close(scope.row)"
                size="mini"
                v-if="scope.row.status == 1 && scope.row.pay_status == 1"
                >取消</el-button
              >
              <el-button
                @click="accomplish(scope.row)"
                size="mini"
                v-if="
                  scope.row.status == 1 &&
                  scope.row.pay_status == 2 &&
                  scope.row.confirm == 2 &&
                  scope.row.ship_status == 3
                "
                >完成</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-tabs>
    </div>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50, 60]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :before-close="CloseDialog"
    >
      <!--      内层-->
      <el-dialog
        fullscreen
        :visible.sync="innerVisible"
        append-to-body
        :before-close="innderClose"
      >
        <mapc
          :positionc="position"
          @innderClose="innderClose"
          @changeOrderDetails="changeOrderDetails"
        ></mapc>
      </el-dialog>
      <el-tabs v-model="activeName" @tab-click="changeTabs" v-if="fromId == 1">
        <el-tab-pane label="基本信息" name="1">
          <el-descriptions title="">
            <el-descriptions-item direction="vertical" label="订单号">{{
              orderDetails.order_id
            }}</el-descriptions-item>
            <el-descriptions-item direction="vertical" label="订单总金额">{{
              orderDetails.order_amount
            }}</el-descriptions-item>
            <el-descriptions-item direction="vertical" label="支付状态">{{
              orderDetails.pay_status_textc
            }}</el-descriptions-item>
            <el-descriptions-item label="发货状态">{{
              orderDetails.ship_status_text
            }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{
              orderDetails.status_text
            }}</el-descriptions-item>
            <el-descriptions-item label="已支付金额">{{
              orderDetails.payed
            }}</el-descriptions-item>
            <el-descriptions-item label="商品总价">{{
              orderDetails.goods_amount
            }}</el-descriptions-item>
            <el-descriptions-item label="下单人">{{
              orderDetails.username
            }}</el-descriptions-item>
            <el-descriptions-item label="订单来源">小程序</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{
              orderDetails.ctime
            }}</el-descriptions-item>
            <el-descriptions-item label="收货状态">{{
              orderDetails.confirm_text
            }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="2">
          <template>
            <el-table
              max-height="200"
              :data="orderDetails.items"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                align="center"
                label="商品名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="price"
                align="center"
                label="商品单价"
                width="100"
              >
              </el-table-column>
              <el-table-column prop="nums" align="center" label="购买数量">
              </el-table-column>
              <el-table-column prop="amount" align="center" label="商品总价">
              </el-table-column>
              <el-table-column
                prop="reship_nums"
                align="center"
                label="退货数量"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
        <el-tab-pane label="支付单/退款单" name="3">
          <div class="pay_refund">
            <span class="title">支付单</span>
            <el-table
              max-height="200"
              :data="orderDetails.paymentRelItem"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="bill.payment_id"
                v
                align="center"
                label="支付单号"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="bill.payment_code_name"
                align="center"
                label="支付方式"
                width=""
              >
              </el-table-column>
              <el-table-column
                prop="bill.trade_no"
                align="center"
                label="第三方支付单号"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="bill.money"
                align="center"
                label="支付金额"
              >
              </el-table-column>
              <el-table-column
                prop="bill.status_text"
                align="center"
                label="支付状态"
              >
              </el-table-column>
              <el-table-column
                prop="bill.utime_name"
                align="center"
                label="支付时间"
              >
              </el-table-column>
            </el-table>
          </div>
          <!--          退款-->
          <div class="pay_refund">
            <span class="title" slot>退款单</span>
            <el-table
              max-height="200"
              :data="orderDetails.refundItem"
              border
              style="width: 100%"
            >
              <el-table-column prop="refund_id" label="退款单" width="">
              </el-table-column>
              <el-table-column
                prop="payment_code_text"
                label="退款方式"
                width=""
              >
              </el-table-column>
              <el-table-column prop="trade_no" label="第三方支付单号">
              </el-table-column>
              <el-table-column prop="money" label="退款金额"> </el-table-column>
              <el-table-column prop="status_text" label="退款状态">
              </el-table-column>
              <el-table-column prop="utime" label="申请时间"> </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发货单/退货单" name="4">
          <div class="pay_refund">
            <span class="title" slot>发货单</span>
            <el-descriptions
              title=""
              direction="vertical"
              :column="4"
              border
              v-if="orderDetails.maintenanceInfo"
            >
              <el-descriptions-item
                :labelStyle="{ 'text-align': 'center' }"
                label="工人姓名"
                >{{ orderDetails.maintenanceInfo.name }}</el-descriptions-item
              >
              <el-descriptions-item
                :contentStyle="{ 'text-align': 'center' }"
                :labelStyle="{ 'text-align': 'center' }"
                label="工人电话"
                >{{ orderDetails.maintenanceInfo.mobile }}</el-descriptions-item
              >
              <el-descriptions-item
                :contentStyle="{ 'text-align': 'center' }"
                :labelStyle="{ 'text-align': 'center' }"
                label="收货人名"
                >{{ orderDetails.ship_name }}</el-descriptions-item
              >
              <el-descriptions-item
                :contentStyle="{ 'text-align': 'center' }"
                :labelStyle="{ 'text-align': 'center' }"
                label="收货电话"
                >{{ orderDetails.ship_mobile }}
              </el-descriptions-item>
              <el-descriptions-item
                :labelStyle="{ 'text-align': 'center' }"
                :contentStyle="{ 'text-align': 'left' }"
                label="收货地址"
                >{{ orderDetails.ship_address_ds
                }}{{ orderDetails.ship_address }}</el-descriptions-item
              >
            </el-descriptions>
          </div>

          <div class="pay_refund">
            <span class="title" slot>退货单</span>
            <el-table
              max-height="200"
              :data="orderDetails.returnItem"
              border
              style="width: 100%"
            >
              <el-table-column prop="reship_id" label="退货单号" width="">
              </el-table-column>
              <el-table-column prop="aftersales_id" label="售后单号" width="">
              </el-table-column>
              <el-table-column
                prop="bill.trade_no"
                label="退货状态"
                width="150"
              >
              </el-table-column>
              <el-table-column prop="bill.money" label="退货时间">
              </el-table-column>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="发票信息" name="5">
          <el-descriptions title="发票信息">
            <el-descriptions-item
              label="发票ID"
              v-if="orderDetails.fapiao_id"
              >{{ orderDetails.invoice[0].id }}</el-descriptions-item
            >
            <el-descriptions-item label="抬头" v-if="orderDetails.fapiao_id">{{
              orderDetails.invoice[0].name
            }}</el-descriptions-item>
            <el-descriptions-item
              label="手机号"
              v-if="orderDetails.fapiao_id"
              >{{ orderDetails.invoice[0].phone }}</el-descriptions-item
            >
            <el-descriptions-item label="邮箱" v-if="orderDetails.fapiao_id">{{
              orderDetails.invoice[0].email
            }}</el-descriptions-item>
            <el-descriptions-item
              label="发票类型"
              v-if="orderDetails.fapiao_id"
              >{{
                orderDetails.invoice[0].type == 1 ? "个人" : "企业"
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="税号"
              v-if="orderDetails.fapiao_id && orderDetails.invoice[0].type == 2"
              >{{ orderDetails.invoice[0].duty }}</el-descriptions-item
            >
            <el-descriptions-item
              label="企业地址"
              v-if="orderDetails.fapiao_id && orderDetails.invoice[0].type == 2"
              >{{ orderDetails.invoice[0].address }}</el-descriptions-item
            >
            <el-descriptions-item
              label="企业电话"
              v-if="orderDetails.fapiao_id && orderDetails.invoice[0].type == 2"
              >{{
                orderDetails.invoice[0].enterprise_phone
              }}</el-descriptions-item
            >
            <el-descriptions-item
              label="开户行名称"
              v-if="orderDetails.fapiao_id && orderDetails.invoice[0].type == 2"
              >{{ orderDetails.invoice[0].row_name }}</el-descriptions-item
            >
            <el-descriptions-item
              label="开户行账号"
              v-if="orderDetails.fapiao_id && orderDetails.invoice[0].type == 2"
              >{{ orderDetails.invoice[0].account }}</el-descriptions-item
            >

            <el-descriptions-item label="提示" v-if="!orderDetails.fapiao_id">
              <el-tag size="small">暂无开票</el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="订单备注" name="6">
          <textarea
            name=""
            id=""
            rows="10"
            class="textarea"
            v-model="orderDetails.remark"
          ></textarea>
          <el-button type="primary" class="btn" @click="saveRemark"
            >保存</el-button
          >
        </el-tab-pane>
      </el-tabs>

      <el-tabs
        v-model="activeName2"
        @tab-click="changeTabsT"
        v-if="fromId == 2"
      >
        <el-tab-pane label="基本信息" name="1">
          <el-descriptions title="">
            <el-descriptions-item label="订单号">{{
              orderDetails.order_id
            }}</el-descriptions-item>
            <el-descriptions-item label="订单总金额">{{
              orderDetails.order_amount
            }}</el-descriptions-item>
            <el-descriptions-item label="支付状态">{{
              orderDetails.pay_status_textc
            }}</el-descriptions-item>
            <el-descriptions-item label="发货状态">{{
              orderDetails.ship_status_text
            }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{
              orderDetails.status_text
            }}</el-descriptions-item>
            <el-descriptions-item label="已支付金额">{{
              orderDetails.payed
            }}</el-descriptions-item>
            <el-descriptions-item label="商品总价">{{
              orderDetails.goods_amount
            }}</el-descriptions-item>
            <el-descriptions-item label="下单人">{{
              orderDetails.username
            }}</el-descriptions-item>
            <el-descriptions-item label="订单来源">小程序</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{
              orderDetails.ctime
            }}</el-descriptions-item>
            <el-descriptions-item label="收货状态">{{
              orderDetails.confirm_text
            }}</el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
        <el-tab-pane label="商品信息" name="2">
          <template>
            <el-table
              max-height="100"
              :data="orderDetails.items"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                align="center"
                label="商品名称"
                width="180"
              >
              </el-table-column>
              <el-table-column
                prop="price"
                align="center"
                label="商品单价"
                width="100"
              >
              </el-table-column>
              <el-table-column prop="nums" align="center" label="购买数量">
              </el-table-column>
              <el-table-column prop="amount" align="center" label="商品总价">
              </el-table-column>
              <el-table-column
                prop="reship_nums"
                align="center"
                label="退货数量"
              >
              </el-table-column>
            </el-table>
          </template>
        </el-tab-pane>
        <el-tab-pane label="收货信息" name="3">
          <div class="area">
            <div class="oneLine">
              <div class="namee">
                <span class="title">收货人姓名</span
                ><el-input
                  v-model="orderDetails.ship_name"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
            <div class="oneLine">
              <div class="mobile">
                <span class="title">收货人电话</span
                ><el-input
                  v-model="orderDetails.ship_mobile"
                  placeholder="请输入内容"
                ></el-input>
              </div>
            </div>
            <div class="addressBox">
              <span class="title">收货地区</span>
              <el-tooltip
                class="item"
                effect="dark"
                :content="orderDetails.ship_address_ds"
                placement="top-start"
              >
                <div class="addInput" @click="InneVisibleB">
                  {{ orderDetails.ship_address_ds }}
                </div>
              </el-tooltip>
            </div>
            <div class="detailsAddress">
              <span class="title">详细地址</span>
              <el-input
                v-model="orderDetails.ship_address"
                placeholder="请输入内容"
                class="detaAddInput"
              ></el-input>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="订单备注" name="5">
          <textarea
            name=""
            rows="10"
            class="textarea"
            v-model="orderDetails.remark"
          ></textarea>
        </el-tab-pane>
      </el-tabs>
      <span slot="footer" class="dialog-footer" v-if="fromId == 2">
        <el-button type="primary" @click="dialogOk">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<!--<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=S5DBZ-PD33I-XMDG2-U4YPJ-7GO4H-4SBNV"></script>-->
<script type="text/javascript"></script>
<!--<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>-->
<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getShopList,
  orderDetails,
  setMessage,
  wancheng,
  quxiao,
} from "../../../../utils/api";
import mapc from "../../../common/map";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    mapc,
  },
  data() {
    //这里存放数据
    return {
      exportDataStandard: {
        订单号: "order_id",
        下单时间: "cctime",
        订单状态: "status_text",
        用户名称: "nickname",
        收货人: "ship_name",
        收货人电话: "user_mobile",
        收货地址: "ship_address_ds",
        支付状态: "pay_status_text",
        发货状态: "ship_status_text",
        订单总额: "payed",
        商品名称: "name",
        商品单价: "price",
        购买数量: "nums",
        商品总价: "amount",
        商品编码: "bn",
      },
      exportName: "导出订单",
      // exportDefaultValue: "这一行这一列没有数据",
      exportDefaultValue: " ",
      imgHeader: this.Global.imgHeader,

      value1: "",
      options1: [
        {
          value: "111",
          label: "请选择",
        },
        {
          value: "1",
          label: "普通订单",
        },
        {
          value: "2",
          label: "快修",
        },
        {
          value: "3",
          label: "一键送水",
        },
        {
          value: "4",
          label: "桶套餐",
        },
        {
          value: "10",
          label: "空桶押金订单",
        },
        {
          value: "11",
          label: "退桶押金",
        },
      ],
      // '订单类型，1是普通订单，2快修 3一键送水 4=桶套餐 10=空桶押金订单  11=退款押金  12=售后',
      token: sessionStorage.getItem("token"),
      topInputList: [
        { title: "订单号", text: "" },
        { title: "用户手机号", text: "" },
        { title: "收货人姓名", text: "" },
      ],
      time1: "",
      tableData: [],
      littleTableData: [],
      multipleSelection: [],
      multipleSelection1: [],
      one: "456",
      currentPage: 1,
      total: 0,
      limit: 10,
      status: "", //'订单状态 1=正常 2=完成 3=取消',
      payStatus: "", //'支付状态 1=未付款 2=已付款 3=部分付款 4=部分退款 5=已退款',
      ship_status: "", // '发货状态 1=未接单 2=已发货 3=已送达  5=已退货',
      order_type: "", // '订单类型，1是普通订单，2快修 3一键送水 4=桶套餐 10=空桶押金订单  11=退款押金  12=售后',
      loading: true,
      dialogVisible: false,
      activeName: "1",
      activeName2: "1",
      fromId: 0,
      orderDetails: {},
      dialogTitle: "订单详情",
      innerVisible: false,
      position: {
        longitude: 0, //经度
        latitude: 0, //纬度
      },
      time: "",
      // visible: false,
      // codeToText: [],
      // provinceAndCityData: [],
      // pcTextArr: [],
      // regionData: [],
      // pcaTextArr: [],
      // selectedOptions4: ["北京市", "市辖区", "朝阳区"],
    };
  },
  //监听属性 类似于data概念
  computed: {
    // time1(e) {
    //   return e;
    // },
  },
  //监控data中的数据变化
  watch: {
    multipleSelection: {
      //深度监听，可监听到对象、数组的变化
      handler(val, oldVal) {
        let list = [];
        val.forEach((item) => {
          item.index.items.forEach((item2) => {
            list.push({
              order_id: item.order_id,
              cctime: item.cctime,
              status_text: item.status_text,
              nickname: item.nickname,
              ship_name: item.ship_name,
              user_mobile: item.user_mobile,
              ship_address_ds: item.ship_address_ds,
              pay_status_text: item.pay_status_text,
              ship_status_text: item.ship_status_text,
              payed: item.payed,
              name: item2.name,
              price: item2.price,
              nums: item2.nums,
              amount: item2.amount,
              bn: item2.bn,
            });
          });
        });
        this.multipleSelection1 = list;
      },
      deep: true, //true 深度监听
    },
    value1(n, o) {
      if (n == 111) {
        this.value1 = "";
      }
      this.order_type = this.value1;
    },
  },
  //方法集合
  methods: {
    close(row) {
      quxiao(sessionStorage.getItem("token"), row.order_id).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getShopList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    accomplish(row) {
      wancheng(sessionStorage.getItem("token"), row.order_id).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getShopList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    datePicker(e) {
      this.time = "";
      if (e != null) {
        e.forEach((item) => {
          console.log(item);
          this.time += this.getNowTime(item) + ",";
        });
        this.time = this.time.slice(0, this.time.length - 1);
      } else {
        this.time = "";
      }
    },
    popoverShow(row) {
      this.littleTableData = row.index.items;
    },
    popoverHide(row) {},
    createExportData() {
      return this.multipleSelection1;
    },
    toggleSelection() {
      this.$refs.multipleTable.clearSelection();
    },
    startDownload() {
      console.log();
      if (this.multipleSelection1.length <= 0) {
        this.$message("请选择要下载的数据");
      } else {
        this.$message("下载中···");
      }
    },
    finishDownload() {
      this.$message({
        message: "下载成功",
        type: "success",
      });
      // 下载成功取消选择
      this.toggleSelection();
    },
    derive() {
      console.log(this.multipleSelection);
    },
    innderClose() {
      this.innerVisible = false;
    },
    changeOrderDetails(ship_address_ds, ship_address_yx) {
      this.orderDetails.ship_address_yx = ship_address_yx;
      this.orderDetails.ship_address_ds = ship_address_ds;
    },
    InneVisibleB() {
      if (
        this.orderDetails.ship_address_yx != "" &&
        this.orderDetails.ship_address_yx != null
      ) {
        this.position = {
          latitude: this.orderDetails.ship_address_yx.split(",")[1],
          longitude: this.orderDetails.ship_address_yx.split(",")[0],
        };
      }
      this.innerVisible = true;
    },
    opctionchangeOne(e) {},
    // 选中的用户
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 每页 ${val} 条
    handleSizeChange(val) {
      this.limit = val;
      this.getShopList();
    },
    // 第几页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getShopList();
    },
    // 获取用户信息
    getShopList() {
      this.loading = true;
      getShopList(
        this.token,
        this.currentPage,
        this.limit,
        this.topInputList[1].text,
        this.topInputList[0].text,
        this.status,
        this.payStatus,
        this.ship_status,
        this.order_type,
        this.topInputList[2].text,
        this.time
      ).then((res) => {
        if (res.data.status) {
          console.log(res.data.data);
          this.tableData = res.data.data.data;

          this.tableData.forEach((item) => {
            // 收货地址
            item.shouhuoAddress = item.ship_address_ds + item.ship_address;
            if (item.ship_address_ds == null && item.ship_address == null) {
              item.shouhuoAddress = "";
            }
            // '订单类型，1是普通订单，2快修 3一键送水 4=桶套餐 10=空桶押金订单  11=退款押金  12=售后',
            if (item.order_type) {
              if (item.order_type == 1) {
                item.order_type1 = "普通订单";
              }
              if (item.order_type == 2) {
                item.order_type1 = "快修";
              }
              if (item.order_type == 3) {
                item.order_type1 = "一键送水";
              }
              if (item.order_type == 4) {
                item.order_type1 = "桶套餐";
              }
              if (item.order_type == 10) {
                item.order_type1 = "空桶押金订单";
              }
              if (item.order_type == 11) {
                item.order_type1 = "退桶押金";
              }
              if (item.order_type == 12) {
                item.order_type1 = "售后";
              }
            }
            // 创建时间
            item.cctime = this.parseTime(item.ctime);
            // `pay_status`  支付状态 1=未付款 2=已付款 3=部分付款 4=部分退款 5=已退款',
            if (item.pay_status == 1) {
              item.pay_status_text = "未付款";
            }
            if (item.pay_status == 2) {
              item.pay_status_text = "已支付";
            }
            if (item.pay_status == 5) {
              item.pay_status_text = "已退款";
            }

            // `status`  '订单状态 1=正常 2=完成 3=取消',
            if (item.status == 1) {
              item.status_text = "正常";
            }
            if (item.status == 2) {
              item.status_text = "完成";
            }
            if (item.status == 3) {
              item.status_text = "取消";
            }
            // `ship_status` '发货状态 0=未派单 1=未接单 2=已发货 3=已送达
            if (item.ship_status == 1) {
              item.ship_status_text = "未接单";
            }

            if (item.order_type == 11 || item.order_type == 2) {
              if (item.ship_status == 2) {
                item.ship_status_text = "已接单";
              }
              if (item.ship_status == 3) {
                item.ship_status_text = "已验收";
              }
            } else {
              if (item.ship_status == 2) {
                item.ship_status_text = "已发货";
              }
              if (item.ship_status == 3) {
                item.ship_status_text = "已送达";
              }
            }

            if (item.ship_status == 4) {
              item.ship_status_text = "已退货";
            }

            // 图片
            // 确认图片
            item.authority_img = item.authority_confirm_img
              ? this.imgHeader + item.authority_confirm_img
              : "";
            item.kt_img = item.confirm_kt_img
              ? this.imgHeader + item.confirm_kt_img
              : "";
            if (item.authority_img && item.kt_img) {
              item.img_list = [item.authority_img, item.kt_img];
            } else if (item.kt_img) {
              item.img_list = [item.kt_img];
            }
          });
          //
          this.total = res.data.data.count;
          let timer = setTimeout(() => {
            this.loading = false;
            clearTimeout(timer);
          }, 400);
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.loading = false;
          this.$message.error(res.data.msg);
        }
        let timer = setTimeout(() => {
          this.loading = false;
          clearTimeout(timer);
        }, 400);
      });
    },
    handleClick(tab, event) {
      if (tab.index == 0) {
        // console.log('全部');
        this.status = "";
        this.payStatus = "";
        this.ship_status = "";
        this.order_type = "";
      } else if (tab.index == 1) {
        // console.log('待支付');
        this.status = 1;
        this.payStatus = 1;
        this.ship_status = "";
        this.order_type = "";
      } else if (tab.index == 2) {
        // console.log('代发货');
        this.status = 1;
        this.payStatus = 2;
        this.ship_status = 1;
        this.order_type = "";
      } else if (tab.index == 3) {
        // console.log('代收货');
        this.status = 1;
        this.payStatus = 2;
        this.ship_status = 2;
        this.order_type = "";
      } else if (tab.index == 4) {
        // console.log('待评价');
        this.status = 1;
        this.payStatus = 2;
        this.ship_status = 3;
        this.order_type = "";
      } else if (tab.index == 5) {
        // console.log('已完成');
        this.status = 2;
        this.payStatus = "";
        this.ship_status = "";
        this.order_type = "";
      } else if (tab.index == 6) {
        // console.log('已取消');
        this.status = 3;
        this.payStatus = "";
        this.ship_status = "";
        this.order_type = "";
      }
      this.currentPage = 1;
      this.getShopList();
    },
    getNowTime(time) {
      let date = new Date(time);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minute = minute < 10 ? "0" + minute : minute;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      return (
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        seconds
      );
    },
    search() {
      // console.log(this.time1,this.topInputList[2].text)
      // this.time1
      this.currentPage = 1;
      // return
      this.getShopList();
    },
    checkOrder(row, index) {
      this.fromId = 1;
      this.dialogVisible = true;
      this.dialogTitle = "订单详情";
      orderDetails(this.token, row.order_id)
        .then((res) => {
          if (res.data.status) {
            // console.log(res.data.data)
            this.orderDetails = res.data.data;
            if (this.orderDetails.maintenanceInfo == null) {
              this.orderDetails.maintenanceInfo = {
                name: "",
              };
            }
            for (let k in this.orderDetails) {
              if (k == "pay_status") {
                if (this.orderDetails[k] == 1) {
                  this.orderDetails.pay_status_textc = "未付款";
                }
                if (this.orderDetails[k] == 2) {
                  this.orderDetails.pay_status_textc = "已付款";
                }
                if (this.orderDetails[k] == 3) {
                  this.orderDetails.pay_status_textc = "部分付款";
                }
                if (this.orderDetails[k] == 4) {
                  this.orderDetails.pay_status_textc = "部分退款";
                }
                if (this.orderDetails[k] == 5) {
                  this.orderDetails.pay_status_textc = "已退款";
                }
              }
              if (k == "ship_status") {
                //'发货状态 1=未接单 2=已发货 3=已送达  5=已退货',
                if (this.orderDetails[k] == 1) {
                  this.orderDetails.ship_status_text = "未接单";
                }
                if (
                  this.orderDetails["order_type"] == 11 ||
                  this.orderDetails["order_type"] == 2
                ) {
                  if (this.orderDetails[k] == 2) {
                    this.orderDetails.ship_status_text = "已接单";
                  }
                  if (this.orderDetails[k] == 3) {
                    this.orderDetails.ship_status_text = "已验收";
                  }
                } else {
                  if (this.orderDetails[k] == 2) {
                    this.orderDetails.ship_status_text = "已发货";
                  }
                  if (this.orderDetails[k] == 3) {
                    this.orderDetails.ship_status_text = "已送达";
                  }
                }

                if (this.orderDetails[k] == 5) {
                  this.orderDetails.ship_status_text = "已退货";
                }
              }
              if (k == "status") {
                //'订单状态 1=正常 2=完成 3=取消',
                if (this.orderDetails[k] == 1) {
                  this.orderDetails.status_text = "正常";
                }
                if (this.orderDetails[k] == 2) {
                  this.orderDetails.status_text = "完成";
                }
                if (this.orderDetails[k] == 3) {
                  this.orderDetails.status_text = "取消";
                }
              }
              if (k == "confirm") {
                if (this.orderDetails[k] == 1) {
                  //'售后状态 1=未确认收货 2=已确认收货',
                  this.orderDetails.confirm_text = "未确认收货";
                }
                if (this.orderDetails[k] == 2) {
                  //'售后状态 1=未确认收货 2=已确认收货',
                  this.orderDetails.confirm_text = "已确认收货";
                }
              }
              if (k == "paymentRelItem") {
                this.orderDetails[k].forEach((item) => {
                  if (item.bill.status == 1) {
                    item.bill.status_text = "未支付";
                  }
                  if (item.bill.status == 2) {
                    item.bill.status_text = "已支付";
                  }
                  if (item.bill.status == 3) {
                    item.bill.status_text = "其他";
                  }
                });
              }
              if (k == "refundItem") {
                this.orderDetails[k].forEach((item) => {
                  if (item.payment_code == "wechatpay") {
                    item.payment_code_text = "微信";
                  }
                  if (item.status == 1) {
                    item.status_text = "未退款";
                  }
                  if (item.status == 2) {
                    item.status_text = "已退款";
                  }
                  if (item.status == 3) {
                    item.status_text = "退款失败";
                  }
                  if (item.status == 4) {
                    item.status_text = "退款拒绝";
                  }
                });
              }
            }
          } else {
            if (res.data.msg == "token失效,请重新进行登录") {
              this.$router.push("/login");
            }
            this.loading = false;
            this.$message.error(res.data.msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 编辑订单
    setOrder(row) {
      this.fromId = 2;
      this.dialogVisible = true;
      this.dialogTitle = "订单编辑";
      orderDetails(this.token, row.order_id).then((res) => {
        if (res.data.status) {
          this.orderDetails = res.data.data;
          if (this.orderDetails.maintenanceInfo == null) {
            this.orderDetails.maintenanceInfo = {
              name: "",
            };
          }
          for (let k in this.orderDetails) {
            if (k == "pay_status") {
              if (this.orderDetails[k] == 1) {
                this.orderDetails.pay_status_textc = "未付款";
              }
              if (this.orderDetails[k] == 2) {
                this.orderDetails.pay_status_textc = "已付款";
              }
              if (this.orderDetails[k] == 3) {
                this.orderDetails.pay_status_textc = "部分付款";
              }
              if (this.orderDetails[k] == 4) {
                this.orderDetails.pay_status_textc = "部分退款";
              }
              if (this.orderDetails[k] == 5) {
                this.orderDetails.pay_status_textc = "已退款";
              }
            }
            if (k == "ship_status") {
              //'发货状态 1=未接单 2=已发货 3=已送达  5=已退货',
              if (this.orderDetails[k] == 1) {
                this.orderDetails.ship_status_text = "未接单";
              }
              if (
                this.orderDetails["order_type"] == 11 ||
                this.orderDetails["order_type"] == 2
              ) {
                if (this.orderDetails[k] == 2) {
                  this.orderDetails.ship_status_text = "已接单";
                }
                if (this.orderDetails[k] == 3) {
                  this.orderDetails.ship_status_text = "已验收";
                }
              } else {
                if (this.orderDetails[k] == 2) {
                  this.orderDetails.ship_status_text = "已发货";
                }
                if (this.orderDetails[k] == 3) {
                  this.orderDetails.ship_status_text = "已送达";
                }
              }
              if (this.orderDetails[k] == 5) {
                this.orderDetails.ship_status_text = "已退货";
              }
            }
            if (k == "status") {
              //'订单状态 1=正常 2=完成 3=取消',
              if (this.orderDetails[k] == 1) {
                this.orderDetails.status_text = "正常";
              }
              if (this.orderDetails[k] == 2) {
                this.orderDetails.status_text = "完成";
              }
              if (this.orderDetails[k] == 3) {
                this.orderDetails.status_text = "取消";
              }
            }
            if (k == "confirm") {
              if (this.orderDetails[k] == 1) {
                //'售后状态 1=未确认收货 2=已确认收货',
                this.orderDetails.confirm_text = "未确认收货";
              }
              if (this.orderDetails[k] == 2) {
                //'售后状态 1=未确认收货 2=已确认收货',
                this.orderDetails.confirm_text = "已确认收货";
              }
            }
            if (k == "paymentRelItem") {
              this.orderDetails[k].forEach((item) => {
                if (item.bill.status == 1) {
                  item.bill.status_text = "未支付";
                }
                if (item.bill.status == 2) {
                  item.bill.status_text = "已支付";
                }
                if (item.bill.status == 3) {
                  item.bill.status_text = "其他";
                }
              });
            }
            if (k == "refundItem") {
              this.orderDetails[k].forEach((item) => {
                if (item.payment_code == "wechatpay") {
                  item.payment_code_text = "微信";
                }
                if (item.status == 1) {
                  item.status_text = "未退款";
                }
                if (item.status == 2) {
                  item.status_text = "已退款";
                }
                if (item.status == 3) {
                  item.status_text = "退款失败";
                }
                if (item.status == 4) {
                  item.status_text = "退款拒绝";
                }
              });
            }
          }
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.loading = false;
          this.$message.error(res.data.msg);
        }
      });
    },
    CloseDialog() {
      this.fromId = 0;
      this.dialogVisible = false;
      this.activeName = "1";
      this.getShopList();
    },
    changeTabs(e) {
      // console.log(this.activeName)
      // this.activeName = '1'
    },
    changeTabsT(e) {
      // console.log(this.activeName2)
    },
    dialogOk() {
      let data = {
        mark: this.orderDetails.mark,
        ship_address: this.orderDetails.ship_address,
        ship_address_ds: this.orderDetails.ship_address_ds,
        ship_address_yx: this.orderDetails.ship_address_yx,
        ship_mobile: this.orderDetails.ship_mobile,
        ship_name: this.orderDetails.ship_name,
      };
      setMessage(
        this.token,
        "order",
        "order_id",
        this.orderDetails.order_id,
        JSON.stringify(data)
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
          this.getShopList();
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.loading = false;
          this.$message.error(res.data.msg);
        }
      });
      this.dialogVisible = false;
    },
    saveRemark() {
      let data = {
        mark: this.orderDetails.mark,
      };
      setMessage(
        this.token,
        "order",
        "order_id",
        this.orderDetails.order_id,
        JSON.stringify(data)
      ).then((res) => {
        if (res.data.status) {
          this.$message({
            message: "操作成功",
            type: "success",
          });
        } else {
          if (res.data.msg == "token失效,请重新进行登录") {
            this.$router.push("/login");
          }
          this.loading = false;
          this.$message.error(res.data.msg);
        }
        this.dialogVisible = false;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）

  mounted() {
    this.getShopList();
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped >
#app {
  width: 100%;
}

/deep/.header {
  background: white !important;
  box-shadow: 0 5px 10px #ddd;
  min-height: 40px;
  display: flex;
  padding: 10px;
  align-items: center;
}

.top-input {
  width: 150px;
  margin-right: 20px;
}

/deep/.el-table th.el-table__cell > .cell {
  text-align: center;
}

/deep/.el-table--border .el-table__cell:first-child .cell {
  text-align: center;
}

/deep/.el-table .cell.el-tooltip {
  text-align: center;
}

/deep/ .el-tabs--border-card > .el-tabs__content {
  padding: 0;
}

.pay_refund {
  margin-bottom: 20px;
}

.pay_refund .title {
  font-weight: 800;
  font-size: 1.2em;
  display: block;
  margin-bottom: 20px;
}

.textarea {
  width: 97%;
  outline: none;
  padding: 10px;
  font-size: inherit;
}

/deep/ .el-tabs__content .el-tab-pane {
  width: 98%;
}

.btn {
  padding: 12px 70px;
  display: block;
  margin: 20px auto;
}

.area {
  padding: 20px;
}

.area .oneLine {
  display: flex;
  margin-top: 15px;
}

.area .oneLine .namee,
.area .oneLine .mobile {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

/deep/.oneLine .el-input {
  width: 130px;
  margin-left: 20px;
}

.addressBox {
  margin: 20px 0;
  display: flex;
  align-items: center;
}

.oneLine .title {
  width: 70px;
}

.addressBox .title,
.detailsAddress .title {
  display: block;
  width: 70px;
}

.detaAddInput {
  margin-left: 20px;
  width: 50%;
}

.detailsAddress {
  display: flex;
  align-items: center;
}

.addInput {
  margin-left: 20px;
  width: 50%;
  -webkit-appearance: none;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: 0;
  padding: 0 15px;
  -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.everyBox {
  display: flex;
  align-items: center;
  padding: 10px 0;
  margin-right: 10px;
}

.header .span {
  font-size: initial;
}

.body {
  margin: 20px 0;
}

.datePicker {
  margin-right: 20px;
}

.orderId {
  cursor: pointer;
}
</style>
